import React, {Component} from 'react'
import {mdiArrowLeft} from '@mdi/js'
import {ReactNode} from 'react'
import Card from './Card'
import CardHeader from './CardHeader'
import ButtonIcon from '../icon/ButtonIcon'
import CardBody from './CardBody'
import CardFooter from './CardFooter'
import {Button} from '../button/Button'

interface CardFormProps {
  title: React.ReactNode
  goBack: () => void
  children: ReactNode
  onSubmit: (evt: any) => Promise<void>
  isSubmitDisabled: boolean
  isPaddingForButton?: boolean
  classNameCardBody?: string
}

class CardForm extends Component<CardFormProps> {
  render() {
    const {
      title,
      goBack,
      children,
      onSubmit,
      isSubmitDisabled,
      isPaddingForButton,
      classNameCardBody,
    } = this.props
    return (
      <form onSubmit={onSubmit}>
        <Card>
          <CardHeader isPaddingForButton={isPaddingForButton}>
            <ButtonIcon
              iconPath={mdiArrowLeft}
              title={'Назад'}
              className={'mr-x2'}
              onClick={() => {
                goBack()
              }}
            />
            {title}
          </CardHeader>
          <CardBody className={classNameCardBody ? classNameCardBody : undefined}>
            {children}
          </CardBody>
          <CardFooter>
            <Button
              size={'sm'}
              type={'button'}
              color={'primary'}
              style={'outline'}
              className={'mr-x6'}
              onClick={() => {
                goBack()
              }}>
              Отмена
            </Button>
            <Button size={'sm'} type={'submit'} color={'primary'} disabled={isSubmitDisabled}>
              Сохранить
            </Button>
          </CardFooter>
        </Card>
      </form>
    )
  }
}

export default CardForm
